<template>
  <div class="notice-list">
       <div class="header">
            <h3>消息<span>公告</span></h3>
            <a href="" >更多>></a>
       </div>
       <div class="list">
            <div  class="item">
                <a href="">1.关于规范公务用车使用的通知。关于规范公务用车使用的通知。关于规范公务用车使用的通知。关于规范公务用车使用的通知。关于规范公务用车使用的通知。</a>
                <span>2020-5-8</span>
            </div>
            <div  class="item">
                <a href="">1.关于规范公务用车使用的通知。</a>
                <span>2020-5-8</span>
            </div>
            <div  class="item">
                <a href="">1.关于规范公务用车使用的通知。</a>
                <span>2020-5-8 </span>
            </div>
            <div  class="item">
                <a href="">1.关于规范公务用车使用的通知。</a>
                <span>2020-5-8</span>
            </div>
            <div  class="item">
                <a href="">1.关于规范公务用车使用的通知。</a>
                <span>2020-5-8</span>
            </div>
            <div  class="item">
                <a href="">1.关于规范公务用车使用的通知。</a>
                <span>2020-5-8</span>
            </div>
       </div>
  </div>
</template>

<script>
export default {
  name: 'NoticeList',
  props: {
    data: Object
  }
}
</script>

<style scoped>
.notice-list{
  padding: 20px;
  margin:20px;
  background:rgba(255,255,255,1);
  box-shadow:0px 2px 40px 0px rgba(120,120,120,0.29);
  border-radius:16px;  
}
.header{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:space-between;
   font-size: 30px;
   font-style:italic;
}
.header h3{
  color: #165DFF;
}
.header h3 span,.header a,.item ,.item a{
  color:#333333
}

.list{
  
}
.item{
  margin-top: 53px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;

}
.item ,.item a{
  flex: 1;
  font-size: 26px;
}
.item a{
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}
.item span{
   margin-left: 15px;
   display: block;
   width: 125px;
}
</style>
